<template>
  <div :style="wrapperStyle" @mousedown="onButtonDown" @touchstart="onButtonDown" class="miva-slider__button-wrapper" ref="button">
    <div class="item-tip">{{value}}</div>
  </div>
</template>

<script>
export default {
    name: 'MVSliderButton',
    props: {
        value: {
            type: Number,
            default: 0,
        },
        vertical: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            dragging: false,
            isClick: false,
            startX: 0,
            currentX: 0,
            startY: 0,
            currentY: 0,
            startPosition: 0,
            newPosition: 0,
        };
    },
    computed: {
        currentPosition() {
            const path = this.value;
            return `${path}%`;
        },
        wrapperStyle() {
            return this.vertical
                ? { bottom: this.currentPosition }
                : { left: this.currentPosition };
        },
    },
    methods: {
        onButtonDown(event) {
            event.preventDefault();
            this.onDragStart(event);
            window.addEventListener('mousemove', this.onDragging);
            window.addEventListener('touchmove', this.onDragging);
            window.addEventListener('mouseup', this.onDragEnd);
            window.addEventListener('touchend', this.onDragEnd);
            window.addEventListener('contextmenu', this.onDragEnd);
        },
        onDragStart(event) {
            this.dragging = true;
            this.isClick = true;
            if (event.type === 'touchstart') {
                event.clientY = event.touches[0].clientY;
                event.clientX = event.touches[0].clientX;
            }
            if (this.vertical) {
                this.startY = event.clientY;
            } else {
                this.startX = event.clientX;
            }
            this.startPosition = parseFloat(this.value);
            this.newPosition = this.startPosition;
        },
        onDragging(event) {
            if (this.dragging) {
                this.isClick = false;
                if (event.type === 'touchmove') {
                    event.clientY = event.touches[0].clientY;
                    event.clientX = event.touches[0].clientX;
                }
                let diff = 0;
                if (this.vertical) {
                    this.currentY = event.clientY;
                    diff = this.startY - this.currentY;
                } else {
                    diff = this.startX - this.currentX;
                }
                console.log('diff', diff);
                let newPosition = this.startPosition + diff;
                if (newPosition < 0) {
                    newPosition = 0;
                } else if (newPosition > 100) {
                    newPosition = 100;
                }
                this.newPosition = newPosition;
                this.setPosition(this.newPosition);
                this.$emit('input', newPosition);
            }
        },
        onDragEnd() {
            if (this.dragging) {
                setTimeout(() => {
                    this.dragging = false;
                    if (!this.isClick) {
                        this.setPosition(this.newPosition);
                    }
                }, 0);
                window.removeEventListener('mousemove', this.onDragging);
                window.removeEventListener('touchmove', this.onDragging);
                window.removeEventListener('mouseup', this.onDragEnd);
                window.removeEventListener('touchend', this.onDragEnd);
                window.removeEventListener('contextmenu', this.onDragEnd);
            }
        },
        setPosition(newPosition) {
            if (newPosition === null || Number.isNaN(newPosition)) return;
            if (newPosition < 0) {
                newPosition = 0;
            } else if (newPosition > 100) {
                newPosition = 100;
            }
        },
    },
};
</script>


<style lang="less" scoped>
.miva-slider__button-wrapper {
  width: 8px;
  height: 8px;
  position: absolute;
  bottom: 0%;
  left: 50%;
  z-index: 2;
  transform: translateY(50%) translateX(-50%);
  border: 3px solid #fff;
  border-radius: 50%;
  background-color: @player-progress-btn;
  box-shadow: 0 0 2px darken(@player-progress-btn, 20%);
  cursor: pointer;
  &:active {
    .item-tip {
      display: block;
    }
  }
  .item-tip {
    display: none;
    position: absolute;
    right: 100%;
    top: 0;
    transform: translate(-150%, -50%);
    padding: 0 5px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    &::before {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 100%;
      transform: translateY(-50%);
      border: 5px solid transparent;
      border-left-color: rgba(0, 0, 0, 0.5);
    }
  }
}
</style>
